<template>
  <div class="line-order">
    <div class="f-sb-c">
      <div id="main" v-if="goods">
        <div
          id="box"
          v-for="(row, index) in goods"
          :key="index"
          class="f-sb-c"
        >
          <div id="info" class="f-sb-c">
            <router-link to="/"
              ><img id="img" :src="require('@/public/img/defaultGoods.png')"
            /></router-link>
            <div id="text">
              <router-link to="/">{{row.title}}</router-link>
              <div id="detail">
                <el-popover
                  placement="top-start"
                  title="套餐详情"
                  width="150"
                  trigger="hover"
                >
                  <div>
                    <div
                      v-for="(item, ind) in 3"
                      :key="ind"
                      class="f-sb-c"
                    >
                      <span>{{ item.name }}</span
                      ><span>{{ item.num }}</span>
                    </div>
                  </div>
                  <span id="setmeal-btn" slot="reference">{{`${row.setMeal.name}(￥${row.setMeal.price}.00)`}}</span>
                </el-popover>
                <span>{{ row.color }}</span
                ><span>{{ `${row.ram}+${row.rom}` }}G</span>
                <span>x{{ row.amount }}</span>
              </div>
              <strong id="price">￥{{ row.price }}.00</strong>
            </div>
            <div>{{theTotalPrice}}</div>
          </div>
        </div>
      </div>
      <div id="other" class="f-sa-c">
        <div id="order" class="f-c-c">
          <div>￥{{allTotalPrice}}.00</div>
        </div>
        <div id="note" class="f-c-c">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入备注内容"
            v-model="textarea"
          >
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LineOrder",
  props: ["goods"],
  data() {
    return {
      textarea: "",
      theTotalPrice: 0,
      allTotalPrice: 43134,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
  computed: {
    setMeals(){
      return this.$store.state.opts.setMeals;
    },
    setMealConts() {
      return function (ind) {
        return this.setMeals.filter(
          (item) => item.id === this.deal.goods[ind].set_meal
        )[0].conts;
      };
    },
    // setMealName() {
    //   return function (ind) {
    //     return this.setMeals.filter(
    //       (item) => item.id === this.deal.goods[ind].set_meal
    //     )[0].name;
    //   };
    // },
    // setMealPrice() {
    //   return function (ind) {
    //     return this.setMeals.filter(
    //       (item) => item.id === this.deal.goods[ind].set_meal
    //     )[0].price;
    //   };
    // },
    // totalMoney() {
    //   let total = 0;
    //   this.deal.goods.forEach((item, ind) => {
    //     total += (item.unit_price + this.setMealPrice(ind)) * item.amount;
    //   });
    //   return total;
    // },
  },
  mounted() {
    // console.log(this.deal);
  },
};
</script>
<style lang="scss" scoped>
.el-input-number {
  margin: 15px 0;
}
#main {
  width: calc(100% - 550px);
  #box {
    padding: 10px 0;
    &:not(:last-child) {
      border-bottom: 1px dashed #ddd;
    }
  }
}
#deal {
  padding: 10px 20px;
  margin-bottom: 15px;
  background: $background-color-base;
}
#info {
  width: 700px;
  #img {
    height: 100px;
    width: 100px;
  }
  #text {
    a {
      font-weight: bold;
      @include text-ellipsis(2);
      line-height: 22px;
      height: 44px;
    }
    #tags {
      margin-bottom: 5px;
      .el-tag:not(:last-child) {
        margin-right: 5px;
      }
    }
    #detail {
      margin: 4px 0;
      font-size: 14px;
      span {
        color: $color-text-secondary;
        margin-right: 20px;
      }
    }
    #price {
      color: $theme-color;
    }
  }
}
#order {
  width: 250px;
  flex-direction: column;
}
#note {
  width: 250px;
}
</style>